<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>招生数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(2){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>招生数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>广告效果分析</b></div>
                </div>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;margin-top: 100px">
                <li class="active">
                    <a href="#chart1" data-toggle="tab">全年</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()" style="color:#3398DB;">本月</a>
                </li>
                <li>
                    <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">今日</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
var dom = document.getElementById("container");
//自适应宽高
var myChartContainer = function () {
    dom.style.width = window.innerWidth-160+'px';
    // dom.style.height = window.innerHeight+'px';
};

myChartContainer();

var myChart = echarts.init(dom);
var app = {};   
option = null;
app.title = '坐标轴刻度与标签对齐';

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['25% 电视台','23% 活动','18% 介绍','16% 网络','10% 宣传单','5% 转校','3% 其他'],
        textStyle:{
            fontSize:20,
            padding:25
        },

    },
    graphic:{
        type:'text',
        left:'center',
        top:'400px',
        z:2,
        zlevel:100,
        style:{
            text:"共8998人",
            x:100,
            y:100,
            textAlign:'center',
            fill:'#000',
            width:100,
            height:100,
            fontSize:40
        }
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle:{
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 30,
                shadowOffsetY:-30
            },
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:3, name:'3% 其他',itemStyle:{
                    color:"#00a650"
                }},
                {value:5, name:'5% 转校',itemStyle:{
                    color:"#eeab09"
                }},
                {value:10, name:'10% 宣传单',itemStyle:{
                    color:"#7255e7"
                }},
                {value:16, name:'16% 网络',itemStyle:{
                    color:"#8560a8"
                }},
                {value:18, name:'18% 介绍',itemStyle:{
                    color:"#2c2c2c"
                }},
                {value:23, name:'23% 活动',itemStyle:{
                    color:"#ff1668"
                }},
                {value:25, name:'25% 电视台',itemStyle:{
                    color:"#998675"
                }},
            ]
        }
    ]
};

if (option && typeof option === "object") {
    myChart.setOption(option, true);
}


 //浏览器大小改变时重置大小
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};
</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
</html>